<seed-content class="gray-background" #content>
  <seed-toolbar-header>
    <seed-toolbar-title>{{haggleInfo?.haggleTitle}}</seed-toolbar-title>
    <seed-toolbar-menu></seed-toolbar-menu>
  </seed-toolbar-header>

  <div class="wrap" >

    <div class="haggle-info" *ngIf="haggleInfo.goodsCode">

      <div class="haggle-item seed-flexbox seed-flexbox-align-center" *ngIf="haggleInfo.goodsCode" [routerLink]="[haggleInfo?.nextStepUrl]">

        <p class="haggle-goods-img">
          <seed-img *ngIf="haggleInfo.goodsImage" [lazyLoadImg]="haggleInfo?.goodsImage"
                    [background]="true" [defaultImg]="'middle'"> </seed-img>
        </p>

        <div class="haggle-goods-info seed-flexbox seed-flexbox-column
             seed-flexbox-content-between seed-flexbox-item">
          <div class="haggle-goods-name">{{haggleInfo.goodsName}}
            <!--<h3 class="haggle-goods-name">{{haggleInfo.goodsName}}</h3>-->
            <!--<span class="haggle-sku-name">{{haggleInfo.skuName}}</span>-->
          </div>
          <div class="haggle-goods-price">原价￥{{haggleInfo.goodsPrice | twoDotPrice}}</div>
        </div>
      </div>

      <div  *ngIf="markType !== 5">
        <p class="haggle-sum" *ngIf="haggleInfo.haggleStatus !== 3">已助
          <span>￥{{dataStore.totalHaggleAmount?(dataStore.totalHaggleAmount | twoDotPrice):'0.00'}}</span>
        </p>
        <div class="haggle-countdown seed-flexbox seed-flexbox-content-center" *ngIf="haggleInfo?.status === 0 && haggleInfo?.haggleStatus === 1">
          将在&nbsp;&nbsp;<span>{{times.day}}</span>天<span>{{times.hour}}</span>:<span>{{times.minute}}</span>:<span>{{times.second}}</span>结束
        </div>
        <div class="haggle-countdown countdown-top seed-flexbox seed-flexbox-content-center "
             *ngIf="haggleInfo?.status === 0 && (haggleInfo?.haggleStatus === 0 || haggleInfo?.haggleStatus === 3)">
          活动将在&nbsp;&nbsp;<strong>{{haggleInfo?.startTime | changetime}}</strong>&nbsp;&nbsp;开始
        </div>

      </div>


      <div class=" haggle-status-wrap seed-flexbox seed-flexbox-content-center">
        <button class="haggle-status1" *ngIf="markType === 1;" (click)="handleHaggleInitiate()">开始助力</button>
        <div class="seed-flexbox seed-flexbox-content-center"  *ngIf="markType === 2">
          <button class="haggle-status2" (click)="sendOrderToConfirm()">立即报名</button>
          <button class="haggle-status3" (click)="haggleShared()">找人助力</button>
        </div>
        <button class="haggle-status1" *ngIf="markType === 3" (click)="handleHaggleInitiate()">帮忙助力</button>
        <div class="seed-flexbox seed-flexbox-content-center" *ngIf="markType === 4">
              <button class="haggle-status4" (click)="goToHaggleInitiate()">我也要</button>
              <button class="haggle-status3" (click)="haggleShared()">帮他找人</button>
        </div>
        <button class="haggle-status5" *ngIf="markType === 5">离开活动</button>
        <button class="haggle-status6" *ngIf="markType === 6">活动未开始</button>
      </div>

      <div class="haggle-explain" *ngIf="haggleInfo?.haggleDesc">
        <H3 class="explain-title seed-flexbox seed-flexbox-align-center">
          <em class="arrow-left"></em>活动说明<em class="arrow-right"></em>
        </H3>
        <div [innerHTML]="haggleInfo?.haggleDesc"></div>

      </div>

      <seed-infinite-scroll (infiniteScroll)="getHaggleUsers()">

      <div class="haggle-ace" *ngIf="haggleUserList.length > 0">
        <H3 class="haggle-ace-title seed-flexbox seed-flexbox-align-center">
          <em class="arrow-left"></em>助力高手<em class="arrow-right"></em>
        </H3>

          <ul>
            <li *ngFor=" let haggleUser of haggleUserList; let i = index;">
              <div *ngIf="haggleUser.hagglePrice" class="seed-flexbox seed-flexbox-align-center">
                <div class="haggle-ace-image" >
                  <seed-avatar [lazyLoadAvatar]="haggleUser?.userIcon"
                               [userId]="haggleUser?.haggleUserId"
                  ></seed-avatar>
                </div>

                <div class="haggle-ace-infos seed-flexbox seed-flexbox-align-center seed-flexbox-content-between seed-flexbox-item">
                  <div class="seed-flexbox seed-flexbox-column ">
                    <span class="username">{{haggleUser.userNickName ? haggleUser.userNickName : '蒙面助力高手'}}</span>
                    <span>{{haggleUser.phone}}</span>
                  </div>

                  <div class="haggle-ace-money">
                    <span class="price">砍掉￥{{haggleUser.hagglePrice | twoDotPrice}}</span>
                  </div>
                </div>

              </div>

            </li>
            <seed-infinite-scroll-content class="load-bg" *ngIf="haggleUserList.length > 5"></seed-infinite-scroll-content>
          </ul>


        <missing-default-content *ngIf="haggleUserList.length == 0"></missing-default-content>

      </div>
      </seed-infinite-scroll>
    </div>

    <div class="haggle-bottom seed-flexbox seed-flexbox-content-center">
      <div class="haggle-bottom-bg"></div>
    </div>

  </div>

  <seed-modal #modal1 [content]="content" >
    <div class="haggle-alert seed-modal-content">
      <div class="haggle-ace-bg">
      </div>
      <em class="person-bg"></em>

      <p>恭喜您成功助力
        <strong class="haggle-price">￥{{dataStore.onceHaggleAmount | twoDotPrice}}</strong>
      </p>
      <div class="seed-flexbox seed-flexbox-content-center">
        <button (click)="closeModal()">确定</button>
      </div>
    </div>
  </seed-modal>

  <seed-modal #modal2 [content]="content" >
    <div class="seed-modal-content">
      <div class="haggle-share-bg"></div>
    </div>
  </seed-modal>

</seed-content>




